<template>
    <el-card class="trademark mt-20" >
        <template #header>
          <div class="card-header">
           <el-button type="primary" size="default" :icon="Plus">添加</el-button>
          </div>
        </template>
       <el-table border class="mb-10" :data="trademarkList">
        <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌LOGO" >
          <template #default="{row,$index}">
            <img :src="row.logoUrl"  style="width:80px ; height:'80px'">
          
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row ,index}">
            <el-button type="warning" :icon="Edit"  @click="handleEdit($index, row)">编辑</el-button >
            <el-button type="danger" :icon="Delete" @click="handleDelete($index,row)" >删除</el-button >
          </template>
        </el-table-column>
       </el-table>
       <el-pagination
       v-model:current-page="page" 
       v-model:page-size="limit"
       :total="total"
       :page-sizes="[3,6,9]"
       layout=" prev,pager,next,jumper,->, sizes,  total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     />
      </el-card>
</template>

<script setup lang='ts'>
import { Plus,Edit,Delete} from '@element-plus/icons-vue'
import trademarkApi from '@/api/trademark'
import { ref,onMounted } from 'vue';
import { ElMessage } from 'element-plus';


const handleEdit =($index :any,row :any) =>{

}
const handleDelete =($index:any,row:any) =>{

}

const page = ref(1)
const limit = ref(3)
const total = ref(0)
const trademarkList = ref()
//初始化数据
const getPage = async ()=>{
  try {
    let result = await trademarkApi.getPage(page.value,limit.value)
    console.log(result);
    //表格展示的数据
    trademarkList.value = result.records
    //总条数数值
    total.value = result.total
  } catch (error) {
    ElMessage.error('获取品牌列表失败')
    
  }
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  //组装数据
  limit.value = val;
  //发送请求
  getPage()
}
const handleCurrentChange = (val: number) => {
  //组装数据
  page.value = val;
  //发送请求
  getPage()
}
//页面初始化
onMounted(()=>{
  getPage()
})

</script>

<style scoped>

  
</style>